import {
  DefaultKfExtraProColumnType,
  defaultKfProValueTypeMap,
  fillProRenderFieldPropsTypeRender,
  KfGroupPicker,
  KfProRenderFieldPropsType,
  KfUserPicker,
} from 'kf-web-library';
import React from 'react';
import HxJournalPicker from '@/components/HxJournalPicker';
import HxJournalPeriodPicker from '../HxJournalPeriodPicker';
import HxJournalColumnPicker from '../HxJournalColumnPicker';

export type BizKfExtraProColumnType = 'kfUserPicker' | 'kfGroupPicker' |
  'hxJournalPicker' | 'hxJournalPeriodPicker' | 'hxJournalColumnPicker'
  | DefaultKfExtraProColumnType;

export type BizKfValueTypeMap = Record<BizKfExtraProColumnType | string, KfProRenderFieldPropsType>;

export const bizKfProValueTypeMap = (): BizKfValueTypeMap => {
  const ret: BizKfValueTypeMap = {
    hxJournalPeriodPicker: {
      labelFormatters: (value, fieldProps) => {
        return <HxJournalPeriodPicker.TableSelect
          {...fieldProps}
          value={value}
          readonly={true}
        />;
      },
      renderFormItem: (text, props, dom) => {
        return <HxJournalPeriodPicker.TableSelect
          {...props?.fieldProps}
          modelZindex={1050}
          //getModelContainer={() => dom}
        />;
      },
    },
    hxJournalColumnPicker: {
      labelFormatters: (value, fieldProps) => {
        return <HxJournalColumnPicker.TableSelect
          {...fieldProps}
          value={value}
          readonly={true}
        />;
      },
      renderFormItem: (text, props, dom) => {
        return <HxJournalColumnPicker.TableSelect
          {...props?.fieldProps}
          modelZindex={1050}
          //getModelContainer={() => dom}
        />;
      },
    },
    hxJournalPicker: {
      labelFormatters: (value, fieldProps) => {
        return <HxJournalPicker.TableSelect
          {...fieldProps}
          value={value}
          readonly={true}
        />;
      },
      renderFormItem: (text, props, dom) => {
        return <HxJournalPicker.TableSelect
          {...props?.fieldProps}
          modelZindex={1050}
          //getModelContainer={() => dom}
        />;
      },
    },
    kfUserPicker: {
      labelFormatters: (value, fieldProps) => {
        return <KfUserPicker.Select
            {...fieldProps}
            value={value}
            readonly={true}
        />;
      },
      renderFormItem: (text, props, dom) => {
        return <KfUserPicker.Select
            {...props?.fieldProps}
            modelZindex={1050}
            //getModelContainer={() => dom}
        />;
      },
    },

    kfGroupPicker: {
      labelFormatters: (value, fieldProps) => {
        const {treeSelect, ...rest} = fieldProps;
        return <KfGroupPicker.TreeSelect
            treeSelect={{dropdownMatchSelectWidth: 400, style: {width: "100%"}, ...treeSelect}}
            {...fieldProps}
            value={value}
            readonly={true}
        />;
      },
      renderFormItem: (text, props, dom) => {
        const {treeSelect, ...rest} = props?.fieldProps;
        return <KfGroupPicker.TreeSelect
            treeSelect={{dropdownMatchSelectWidth: 400, style: {width: "100%"}, ...treeSelect}}
            {...rest}
        />;
      },
    },
  }


  return {
    ...defaultKfProValueTypeMap(),
    ...fillProRenderFieldPropsTypeRender(ret)
  }
}
